<template>
	<van-popup
		v-model:show="$store.getters.showInfo"
		position="bottom"
		round
		closeable
		close-on-popstate
		safe-area-inset-bottom
	>
		<div class="title">补充资料</div>

		<div class="content">
			<van-form
				scroll-to-error
				validate-first
				@failed="onFailed"
				@submit="onSubmit"
			>
				<van-field
					size="large"
					label="姓名"
					v-model="name"
					name="name"
					placeholder="请输入姓名"
					:rules="[{ required: true, message: '怎么称呼您呢' }]"
				/>

				<van-button
					round
					block
					type="primary"
					native-type="submit"
					style="margin-top: 20vh"
					>保存</van-button
				>
			</van-form>

			<div class="logout em font_medium" @click="logout">退出登录</div>
		</div>
	</van-popup>
</template>

<script>
import { distributorUpdate } from '@/api'

export default {
	data() {
		return {
			name: '',
			idNum: '',
			showDept: false,
			deptValue: '',
			deptText: '',
			options: [
				{
					text: '富邦',
					value: 1000,
					children: [{ text: '保+事业部', value: 4444 }]
				}
			]
		}
	},
	computed: {},
	mounted() {
		const name = this.$store.getters.userInfo?.name
		this.$store.dispatch('initUserForm', { name })
	},
	methods: {
		onFailed() {},
		onSubmit() {
			distributorUpdate({
				name: this.name
			}).then(() => {
				this.$store.dispatch('hideUserForm')
				this.$store.dispatch('getUserInfo')
			})
		},
		onFinish({ selectedOptions }) {
			// this.showDept = false
			// this.deptText = selectedOptions.map((option) => option.text).join('/')
		},

		logout() {
			this.$store.dispatch('logout')
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.title {
	padding-block: $space_4;
	text-align: center;
	font-size: $font_large;
}
.content {
	padding: $space_3;
}

.logout {
	margin: $space_4;
	text-align: center;
}
</style>
